<template>
    <div>
        <Toolbar :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode"
            style="border-bottom: 1px solid #ccc" />
        <Editor :defaultConfig="editorConfig" :mode="mode" v-model="valueHtml" style="height: 400px; overflow-y: hidden"
            @onCreated="handleCreated" @onChange="handleChange" />
    </div>
</template>

<script setup>
import '@wangeditor/editor/dist/css/style.css';
import { onBeforeUnmount, ref, shallowRef, onMounted, defineProps, defineEmits, inject } from 'vue';
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
import { AdminStore } from '../stores/admin'
// 编辑器实例，必须用 shallowRef，重要！
const editorRef = shallowRef();
const toolbarConfig = {excludeKeys: ['uploadVideo']};
const mode = ref('default')
const valueHtml = ref('')

const server_url = inject('server_url')
// const server = server_url + '/upload/rich_editor'
const editorConfig = { placeholder: '请输入内容...' };
editorConfig.MENU_CONF = {}

editorConfig.MENU_CONF['uploadImage'] = {
    // 小于该值就插入 base64 格式（而不上传），默认为 0
    base64LimitSize: 10 * 1024, // 10kb
    server: server_url + '/upload/rich_editor'
}
editorConfig.MENU_CONF['insertImage'] = {
    parseImageSrc: (src) => {
        if(src.indexOf('http') !== 0){
            return `${server_url}${src}`
        } else {
            return src
        }
    }
}

// 父子传值--自定义属性
const props = defineProps({
    // vue3中，v-model绑定的是modelValue
    modelValue: {
        type: String,
        default: ''
    }
})

let initFinished = false

// 子父传值--自定义事件，修改父组件的值，修改为valueHtml.value
const emit = defineEmits(['update:model-value'])

onMounted(() => {
    setTimeout(() => {
        valueHtml.value = props.modelValue
        initFinished = true
    }, 10);
});

// 组件销毁时，也及时销毁编辑器，重要！
onBeforeUnmount(() => {
    const editor = editorRef.value;
    if (editor == null) return;

    editor.destroy();
});

// 编辑器回调函数
const handleCreated = (editor) => {
    // console.log('created', editor);
    editorRef.value = editor; // 记录 editor 实例，重要！
};

const handleChange = editor => {
    if (initFinished) emit('update:model-value', valueHtml.value)  // vue3中v-model接受数据的方法，这应该是固定写法
}
</script>

<style lang="scss" scoped>

</style>